<template>
  <div>
    <div class="menu">
    	<el-button type="primary" size="small" @click="openAddMemberInfo(sysUserOptions)">模拟添加</el-button>
      <div class="vagueFind" style="margin-left: 25px;">
        <el-form :inline="true" :model="vagueFindForm" class="demo-form-inline" size="small">
          <el-form-item label="查询项">
            <el-input placeholder="请输入内容" v-model="vagueFindForm.input" class="input-with-select"
            clearable :maxlength="vagueFindForm.maxlength" show-word-limit>
              <el-select v-model="vagueFindForm.select" slot="prepend" placeholder="请选择" @change="judgeItem(vagueFindForm.select)">
                <el-option label="收货人姓名" value="1"></el-option>
                <el-option label="电话号码" value="2"></el-option>
                <el-option label="收货地址" value="3"></el-option>
                <el-option label="用户名" value="4"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="getMemberList(1)"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="info" icon="el-icon-delete" circle size="small" title="清除文本框数据" @click="clearvagueFindForm"></el-button>
    </div>
    <!-- 用户列表 -->
    <el-table :data="memberInfoList" style="width: 100%" v-loading="loadStatus">
      <el-table-column prop="consigneeId" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="consigneeName" label="收货人姓名" width="200">
      </el-table-column>
      <el-table-column prop="phoneNum" label="电话号码" width="200">
      </el-table-column>
      <el-table-column prop="address" label="收货地址" width="200">
      </el-table-column>
      <el-table-column prop="sysUser.userCode" label="用户名" width="200">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="openEditorMemberInfo(scope.row)">编辑</el-button>&nbsp;&nbsp;
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delManager(scope.row.consigneeId)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :page-size="8" @current-change="getMemberList"
    	:total="memberCount">
    </el-pagination>
    <AddManagerInfo :addVisible="addVisible" :sysUserOptions="sysUserOptions"></AddManagerInfo>
    <EditorManagerInfo :editorVisible="editorVisible" :editorObj="editorObj"></EditorManagerInfo>
  </div>
</template>

<script>
  import AddManagerInfo from "./component/AddManagerInfo.vue"
  import EditorManagerInfo from "./component/EditorManagerInfo.vue"
  export default {
  	name: "memberInfo",
    components: {
    	AddManagerInfo,
    	EditorManagerInfo,
    },
    data() {
      return {
      	loadStatus: false,
        addVisible: false,
        editorVisible:false,
        memberCount: 0,
      	memberInfoList: [],
        sysUserOptions:{},
        editorObj:{},
        // 模糊查询用实体
        vagueFindForm: {
          input:'',
          select: '',
          consigneeName:"",
          phoneNum:"",
          address:"",
          maxlength:0,
          userCode:"",
        },
      }
    },
    mounted() {
    	this.getMemberList(1)
    },
    methods: {
      clearvagueFindForm(){
        this.vagueFindForm={
          input:'',
          select: '',
          consigneeName:"",
          phoneNum:"",
          address:"",
          maxlength:0,
          userCode:"",
        }
        this.getMemberList(1)
      },
      //判断模糊查询的属性
      judgeItem(item){
        console.log(item)
        //设置默认值全为空
        this.vagueFindForm.consigneeName=''
        this.vagueFindForm.phoneNum=""
        this.vagueFindForm.address=""
        this.vagueFindForm.maxlength=0
        var inputLength = (this.vagueFindForm.input).length
        if(item==1){
          //收货人姓名
          console.log(item)
          this.vagueFindForm.maxlength=20
          // if(inputLength>20){
          //   this.vagueFindForm.consigneeName=(this.vagueFindForm.input).substr(20)
          // }
          this.vagueFindForm.consigneeName=this.vagueFindForm.input
          console.log(this.vagueFindForm.consigneeName)
        }else if(item==2){
          //电话号码
          console.log(item)
          this.vagueFindForm.maxlength=11
          this.vagueFindForm.phoneNum=this.vagueFindForm.input
          console.log(this.vagueFindForm.phoneNum)
        }else if(item==3){
          //收货地址
          console.log(item)
          this.vagueFindForm.maxlength=50
          this.vagueFindForm.address=this.vagueFindForm.input
          console.log(this.vagueFindForm.address)
        }else if(item==4){
          //用户名
          this.vagueFindForm.maxlength=20
          this.vagueFindForm.userCode=this.vagueFindForm.input
          console.log(this.vagueFindForm.userCode)
        }
      },
      //清除文本框数据，返回相对应文本框的值
      clearData(){
          vagueFindForm={
            input:'',
            select: '',
            consigneeName:"",
            phoneNum:"",
            address:"",
            maxlength:0,
            userCode:"",
          },
          this.getMemberList(1)
      },
      openAddMemberInfo(obj) {
        // this.addObj=obj
        console.log(obj)
        this.addVisible = true
      },
      openEditorMemberInfo(obj){
      	console.log(obj)
        var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        if(obj.consigneeId){
          this.editorObj=obj
          this.editorVisible=true
        }else{
          this.$message({
            message: "获取数据错误",
            type: "error",
            duration: 1000,
          })
        }
      },
      // 分页查询数据
      getMemberList(page) {
        var self = this
        self.loadStatus = true
        sessionStorage.setItem("page",page)
        var manager = JSON.parse(sessionStorage.getItem("manager"))
        this.judgeItem(this.vagueFindForm.select)
        //防止错误规格查询
        if((this.vagueFindForm.input).length<this.vagueFindForm.maxlength||
          (this.vagueFindForm.input).length==this.vagueFindForm.maxlength){
          //非法字符判断
          if(this.vagueFindForm.input.split(" ").length==1){
            self.$http.get("/api/CakeShop/MemberInfo/showConsigneeInfo", {
            	params: {
                // start: page,
                // pageSize: 8,
                consignee:{
                  consigneeName:self.vagueFindForm.consigneeName,
                  phoneNum:self.vagueFindForm.phoneNum,
                  address:self.vagueFindForm.address,
                  sysUser:{
                    start: page,
                    pageSize: 8,
                    userCode:self.vagueFindForm.userCode
                  }
                }
            	}
            }).then(function(res) {
            	console.log(res)
            	if (res.data.userlist != null || res.data.userlist != {}) {
            		self.memberCount = res.data.pageCount
            		self.memberInfoList = res.data.userlist
                self.sysUserOptions=res.data.sysuserList
            		self.loadStatus = false
            	}
            }).catch(function(error) {
            	// console.log(error)
            	self.loadStatus = false
            })
          }else{
            self.$message({
            	duration: 1500,
            	message: "查询文本框中存在非法字符空格!",
            	type: "error",
            	onClose: function() {
                self.vagueFindForm.input = ""
            		self.loadStatus = false
            	},
            });
          }
        }else{
          self.$message({
          	duration: 1500,
          	message: "查询条件不符合规格!",
          	type: "error",
          	onClose: function() {
              self.vagueFindForm.input = ""
          		self.loadStatus = false
          	},
          });
        }
      },
      //根据id删除数据
      delManager(consigneeId) {
      	var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        this.$http.post("/api/CakeShop/MemberInfo/delConsignee",{
            consigneeId
        }).then((res) => {
          // console.log(res)
          if (res.data.code===200) {
            this.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                this.getMemberList(sessionStorage.getItem("page"))
              }
            })
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
              duration: 1000
            })
          }
        }, function(err) {})
      }
    },
  }
</script>
<style scoped>
  .menu {
    display: flex;
  	width: 100%;
  	padding: 10px 5px;
  	background: #FFFFFF;
  	box-sizing: border-box;
  	margin-bottom: 5px;
  }
  .menu .vagueFind{
    display: flex;
    background: #FFFFFF;
    margin-left: 20px;
  }
  .menu .vagueFind .el-form .el-form-item{
    margin-bottom: 0;
  }
  .menu .vagueFind .el-form .el-form-item .el-input{
    width: 600px;
  }
  .menu .vagueFind .el-form .el-form-item .el-input .el-select{
     width: 130px;
  }
</style>
